<template>
  <div class="ivz-basic-table">
    <draggable :list="columns" filter=".iva-th-selection" ghostClass="ivz-item-ghost"
               class="ivz-area-draggable" chosenClass="ivz-item-chosen" :move="moveHandle">
      <template v-for="column in columns" :key="column.id">
        <ivz-basic-th :meta="column" />
      </template>
    </draggable>
    <div class="ivz-ibt-content">
      <span style="display: inline-block; width: 100%; text-align: center; margin-top: 68px; font-size: 20px; color: #e0e0e0">可通过编辑表单添加表格字段</span>
    </div>
    <a-pagination class="ivz-ibt-page" v-model:current="current" :total="500" show-size-changer
          v-if="model.page" v-model:pageSize="pageSize" show-quick-jumper show-less-items
          :page-size-options="pageSizeOptions" @showSizeChange="onShowSizeChange" />
  </div>
</template>

<script>
import {reactive} from "vue";
import {mapGetters, mapMutations} from "vuex";
import {EventBus, EventType, MetaEventType, MetaRemoveEvent, MountedEventType} from "@/event";
import Draggable from "@/utils/draggable";
import {htmlTableTabMetas} from "@/metas/DbTableMetas";
import MetaUtils from "@/utils/MetaUtils";
import IvzBasicTh from "@/components/table/IvzBasicTh.vue";

export default {
  name: "IvzBasicTable",
  components: {IvzBasicTh, Draggable},
  data() {
    return {
      data: [],
      current: 1,
      pageSize: 10,
      tableActions: {},
      pageSizeOptions: ['10', '20', '30', '50', '100']
    }
  },
  computed: {
    ...mapGetters({
      model: 'listTabModel',
      columns: 'tableMetas',
      funMetas: 'tableFunMetas'
    }),
  },
  created() {
    EventBus.listener(MetaEventType.formAfterCreate, meta => {
      let tabModel = meta.tabModel;
      let viewTo = tabModel['fieldView'];
      if(viewTo && viewTo.includes('table')) {
        let {id, type, field, name} = meta;
        this.updateTableColumnsMetas({id, type, tabModel:
          reactive({field: field  || id, title: name}), tabMetas: htmlTableTabMetas})
      }
    });

    EventBus.listener(EventType.formTitle, ({val, id}) => {
      let meta = MetaUtils.getMetaById(this.columns, id);
      if(meta) {
        meta['tabModel']['title'] = val;
      }
    });

    EventBus.listener(EventType.formField, ({val, id}) => {
      let meta = MetaUtils.getMetaById(this.columns, id);
      if(meta) {
        meta['tabModel']['field'] = val;
      }
    });

    EventBus.listener(EventType.toTable, ({id, type, field, title}) => {
      this.updateTableColumnsMetas({id, type, tabModel: reactive({field, title})
        , tabMetas: htmlTableTabMetas})
    });

    EventBus.listener(MetaRemoveEvent.delEditMeta, meta => {
      this.removeTableColumnMeta(meta);
    });

    EventBus.listener(EventType.funViewTo, meta => {
      let index = MetaUtils.includeMetas(this.funMetas, meta.id);
      let model = meta['tabModel'];
      let action = this.tableActions[meta.id];
      if(model['funViewTo'] == 'search') {
        if(index > -1) {
          this.funMetas.splice(index, 1);
        }
        if(action) {
          delete this.tableActions[meta.id]
        }
      } else {
        if(index == -1) {
          let {id, type} = meta;
          this.funMetas.push({id, type, tabModel: model});
        }
        if(!action) {
          this.tableActions[meta.id] = meta.id;
        }
      }

      let length = Object.keys(this.tableActions).length;
      let columnIndex = MetaUtils.includeMetas(this.columns, 'action');
      if(length == 1 && columnIndex == -1) {
        this.columns.splice(this.columns.length, 0
            , {id: 'action', type: 'action', tabModel: {fixed: 'right', title: '操作'}});
      } else if(length == 0){
        this.columns.splice(columnIndex, 1);
      }
    });

    EventBus.listener(EventType.funBatch, meta => {
      let filter = this.funMetas.filter(item => item['tabModel']['batch']);
      let index = MetaUtils.includeMetas(this.funMetas, 'selection');
      if(filter.length > 0 && index == -1) {
        this.columns.splice(0, 0, {id: 'selection', type: 'selection', tabModel: {fixed: 'left'}});
      } else if(filter.length == 0 && index > -1) {
        this.columns.splice(0, 1);
      }
    });
  },
  mounted() {
    EventBus.publish(MountedEventType.table, this);
  },
  methods: {
    ...mapMutations(['updateTableColumnsMetas', 'setTableTabMetas'
      , 'removeTableColumnMeta', 'switchActiveMetaTo']),
    onShowSizeChange(current, pageSize) {
      // this.pageSize = pageSize;
    },
    moveHandle(evt) {
      let drop = evt['relatedContext']['element'];
      let drag = evt['draggedContext']['element'];

      // if(drop['tabModel'].fixed != 'no') {
      //   return false;
      // }
      // if(drag['tabModel'].fixed != 'no') {
      //   return false;
      // }

      if(drop['type'] == 'selection' || drop['type'] == 'action') {
        return false;
      }
      if(drag['type'] == 'selection' || drag['type'] == 'action') {
        return false;
      }

      return true;
    }
  }
}
</script>

<style>
.ivz-basic-table {
  height: 280px;
}
.ivz-ibt-content {
  height: 200px;
  border: 1px solid #efefef;
}
.ivz-basic-table .ivz-ibt-page {
  height: 32px;
  margin-top: 3px;
  text-align: right;
}
.ivz-basic-table .ivz-area-draggable {
  height: 48px;
  display: flex;
  overflow-x: auto;
  background: #e0e0e0;
  border: 1px solid #efefef;
}
</style>
